<template>
  <div class="outcontainer">
    <div style="width: 460px;">
      <!-- <el-steps :active="active" finish-status="success" simple style="margin-bottom: 20px">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
      </el-steps> -->
      <h2 style="text-align: center;">请初始化您的密码</h2>
      <el-form :model="changeForm" status-icon :rules="rules" ref="changeForm" class="demo-ruleForm" autocomplete="off">
        <!-- <el-form-item prop="userName">
          <el-input v-model="changeForm.userName" clearable placeholder="请输入新的用户名"></el-input>
        </el-form-item> -->
        <el-form-item prop="userIdentity">
          <el-input v-model="changeForm.userIdentity" clearable placeholder="请输入您的身份证号码"></el-input>
        </el-form-item>
        <!-- <el-form-item prop="userPhone">
          <el-input v-model="changeForm.userPhone" clearable placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item prop="captcha">
          <el-input style="width: 66%;" clearable v-model="changeForm.captcha" placeholder="请输入验证码"></el-input>
          <el-button style="width: 33%;" :disabled="isCountingDown" @click="getCaptcha">获取验证码
            <span v-if="isCountingDown">{{ countdown }}秒</span>
          </el-button>
        </el-form-item> -->
        <el-form-item prop="password">
          <el-input placeholder="请输入新密码" show-password autocomplete="off" v-model="changeForm.password"
            type="password"></el-input>
        </el-form-item>
        <el-form-item prop="againPassword">
          <el-input placeholder="请再次输入密码" show-password autocomplete="off" v-model="changeForm.againPassword"
            type="password"></el-input>
        </el-form-item>

        <!-- <el-form-item prop="password">
          <el-input placeholder="请更换初始化密码" clearable v-model="changeForm.password" type="password"></el-input>
        </el-form-item> -->
        <!-- <el-form-item prop="logincode">
          <el-input class="w68" placeholder="请输入验证码" clearable v-model="changeForm.logincode"></el-input> <img
          class="w32" @click="getNumber" :src="imgNumber" />
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" size="medium" @click="submitForm()">确定</el-button>
          <!-- <el-button type="primary" v-show="!active == 0" size="medium" @click="back()">上一步</el-button> -->
          <!-- <el-button @click="resetForm('changeForm')">重置</el-button> -->
        </el-form-item>
      </el-form>

      <!-- <el-form v-if="active == 1" :model="passForm" ref="passForm" :rules="ruleValidate">
        <el-form-item prop="password">
          <el-input placeholder="请输入新密码" clearable v-model="passForm.password" type="password"></el-input>
        </el-form-item>
        <el-form-item prop="againPassword">
          <el-input placeholder="请再次输入密码" clearable v-model="passForm.againPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button v-if="active == 1" @click="pushOK('passForm')">确定</el-button>
        </el-form-item>
      </el-form> -->
    </div>
  </div>
</template>

<script>
import userLogin from "@/api/login";

export default {
  name: 'authenticaUser',
  data() {
    var validatePass = (rule, value, callback) => {

      var reg = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]])[A-Za-z\d`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]]{8,}$/;
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (!reg.test(value)) {
        callback(new Error('密码至少8位且必有数字+特殊字符+字母'));
      } else {
        if (this.changeForm.againPassword !== '') {
          this.$refs.changeForm.validateField('againPassword');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      var reg = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]])[A-Za-z\d`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]]{8,}$/;
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.changeForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else if (!reg.test(value)) {
        callback(new Error('密码至少8位且必有数字+特殊字符+字母'));
      }
      else {
        callback();
      }
    };
    return {
      changeForm: {
        userName: '',
        userIdentity: '',
        userPhone: '',
        captcha: '',
        password: '',
        againPassword: '',
      },
      passForm: {
        password: '',
        againPassword: '',
      },
      ruleValidate: {
      },
      changeFlag: 0,
      changeAgainFlag: 0,
      isCountingDown: false, // 是否正在倒计时
      countdown: 60, // 倒计时秒数
      timer: null, // 定时器
      rules: {
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        againPassword: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        userIdentity: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
        ],
      },
      state: '',
      imgNumber: '',
      active: 0
    };
  },
  methods: {
    getCaptcha() {
      if (this.isCountingDown) {
        return; // 如果正在倒计时，则不执行获取验证码操作
      }
      userLogin.authenticationPhone({ userPhone: this.changeForm.userPhone }).then(res => {
        console.log(res);
        if (res.code == 0) {
          this.$message.success('发送成功', 2)
        } else {
          this.$message.warning('发送失败', 2)
        }
      });

      // 开始倒计时
      this.isCountingDown = true;
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          // 倒计时结束，重置状态
          this.isCountingDown = false;
          this.countdown = 60;
          clearInterval(this.timer); // 清除定时器
        }
      }, 1000);
    },
    next() {
      this.submitForm()
      if (this.active++ > 1) {

      }
      if (this.active == 1) {
        const data = {

        }
        console.log(this.changeForm);
      };
    },
    back() {
      if (this.active == 0) return
      if (this.active-- > -1) {

      };
    },
    async getInitKey() {
      await userLogin.getInitKey().then(res => {
        this.state = res.data.state
        userLogin.getNumber({ state: res.data.state }).then(res => {
          this.imgNumber = res.data.image
        });
      });
    },
    submitForm() {
      this.$refs.changeForm.validate((valid) => {
        if (valid) {
          userLogin.authenticationUser(this.changeForm).then(res => {
            console.log(res);
            if (res.result == 0) {
              this.$alert('密码修改成功，下次登录请使用新密码', res.message, {
                confirmButtonText: '确定',
                showClose: false,
                callback: action => {
                  this.$router.replace({
                    path: this.$route.query.redirect
                      ? this.$route.query.redirect : "/"
                  })
                }
              });

              // this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
.outcontainer {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../../assets/img/loginbj05.png), url(../../assets/img/loginbj04.png), url(../../assets/img/loginbj01.png), url(../../assets/img/loginbj003.png), url(../../assets/img/loginbj002.png);
  background-size: 218px 155px, 347px 120px, 490px 187px, 333px 226px, 139px 113px;
  background-position: right bottom, left bottom, left 90%, right top, left 130px;
  background-repeat: no-repeat;
}

.w68 {
  width: 68%;
}

.w32 {
  float: right;
  width: 31%;
}

img {
  height: 40px;
  border-radius: 3px;
}
</style>
